<!--
@license
Copyright (C) 2016 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../behaviors/docs-url-behavior/docs-url-behavior.html">
<link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<link rel="import" href="../../../styles/gr-menu-page-styles.html">
<link rel="import" href="../../../styles/gr-page-nav-styles.html">
<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html">
<link rel="import" href="../../settings/gr-change-table-editor/gr-change-table-editor.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
<link rel="import" href="../../shared/gr-page-nav/gr-page-nav.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../shared/gr-select/gr-select.html">
<link rel="import" href="../gr-account-info/gr-account-info.html">
<link rel="import" href="../gr-agreements-list/gr-agreements-list.html">
<link rel="import" href="../gr-edit-preferences/gr-edit-preferences.html">
<link rel="import" href="../gr-email-editor/gr-email-editor.html">
<link rel="import" href="../gr-gpg-editor/gr-gpg-editor.html">
<link rel="import" href="../gr-group-list/gr-group-list.html">
<link rel="import" href="../gr-http-password/gr-http-password.html">
<link rel="import" href="../gr-identities/gr-identities.html">
<link rel="import" href="../gr-menu-editor/gr-menu-editor.html">
<link rel="import" href="../gr-ssh-editor/gr-ssh-editor.html">
<link rel="import" href="../gr-watched-projects-editor/gr-watched-projects-editor.html">

<dom-module id="gr-settings-view">
  <template>
    <style include="shared-styles">
      :host {
        color: var(--primary-text-color);
      }
      #newEmailInput {
        width: 20em;
      }
      #email {
        margin-bottom: 1em;
      }
      .filters p,
      .darkToggle p {
        margin-bottom: 1em;
      }
      .queryExample em {
        color: violet;
      }
      .toggle {
        align-items: center;
        display: flex;
        margin-bottom: 1rem;
        margin-right: 1rem;
      }
    </style>
    <style include="gr-form-styles"></style>
    <style include="gr-menu-page-styles"></style>
    <style include="gr-page-nav-styles"></style>
    <div class="loading" hidden$="[[!_loading]]">加载中...</div>
    <div hidden$="[[_loading]]" hidden>
      <gr-page-nav class="navStyles">
        <ul>
          <li><a href="#Profile">个人档案</a></li>
          <li><a href="#Preferences">偏好设置</a></li>
          <li><a href="#DiffPreferences">Diff 偏好设置</a></li>
          <li><a href="#EditPreferences">Edit 偏好设置</a></li>
          <li><a href="#Menu">菜单</a></li>
          <li><a href="#ChangeTableColumns">修改选项卡列表</a></li>
          <li><a href="#Notifications">提醒</a></li>
          <li><a href="#EmailAddresses">邮箱地址</a></li>
          <li><a href="#HTTPCredentials">HTTP 授权</a></li>
          <li hidden$="[[!_serverConfig.sshd]]"><a href="#SSHKeys">
            SSH Keys
          </a></li>
          <li hidden$="[[!_serverConfig.receive.enable_signed_push]]"><a href="#GPGKeys">
            GPG Keys
          </a></li>
          <li><a href="#Groups">群组</a></li>
          <li><a href="#Identities">身份</a></li>
          <template is="dom-if" if="[[_serverConfig.auth.use_contributor_agreements]]">
            <li>
              <a href="#Agreements">协议</a>
            </li>
          </template>
          <li><a href="#MailFilters">邮件 Filters</a></li>
          <gr-endpoint-decorator name="settings-menu-item">
          </gr-endpoint-decorator>
        </ul>
      </gr-page-nav>
      <main class="gr-form-styles">
        <h1>用户设置</h1>
        <section class="darkToggle">
          <div class="toggle">
            <paper-toggle-button
                checked="[[_isDark]]"
                on-change="_handleToggleDark"></paper-toggle-button>
            <div>暗色模式（内测）</div>
          </div>
          <p>
            暗色主题尚在内测阶段，会有不稳定现象，不建议使用。
          </p>
        </section>
        <h2
            id="Profile"
            class$="[[_computeHeaderClass(_accountInfoChanged)]]">个人档案</h2>
        <fieldset id="profile">
          <gr-account-info
              id="accountInfo"
              mutable="{{_accountNameMutable}}"
              has-unsaved-changes="{{_accountInfoChanged}}"></gr-account-info>
          <gr-button
              on-tap="_handleSaveAccountInfo"
              disabled="[[!_accountInfoChanged]]">保存修改</gr-button>
        </fieldset>
        <h2
            id="Preferences"
            class$="[[_computeHeaderClass(_prefsChanged)]]">偏好设置</h2>
        <fieldset id="preferences">
          <section>
            <span class="title">每页显示的行数</span>
            <span class="value">
              <gr-select
                  bind-value="{{_localPrefs.changes_per_page}}">
                <select>
                  <option value="10">每页 10 行</option>
                  <option value="25">每页 25 行</option>
                  <option value="50">每页 50 行</option>
                  <option value="100">每页 100 行</option>
                </select>
              </gr-select>
            </span>
          </section>
          <section>
            <span class="title">日期/时间格式</span>
            <span class="value">
              <gr-select
                  bind-value="{{_localPrefs.date_format}}">
                <select>
                  <option value="STD">Jun 3 ; Jun 3, 2016</option>
                  <option value="US">06/03 ; 06/03/16</option>
                  <option value="ISO">06-03 ; 2016-06-03</option>
                  <option value="EURO">3. Jun ; 03.06.2016</option>
                  <option value="UK">03/06 ; 03/06/2016</option>
                </select>
              </gr-select>
              <gr-select
                  bind-value="{{_localPrefs.time_format}}">
                <select>
                  <option value="HHMM_12">4:10 PM</option>
                  <option value="HHMM_24">16:10</option>
                </select>
              </gr-select>
            </span>
          </section>
          <section>
            <span class="title">邮件提醒</span>
            <span class="value">
              <gr-select
                  bind-value="{{_localPrefs.email_strategy}}">
                <select>
                  <option value="CC_ON_OWN_COMMENTS">只要有评论时就提醒</option>
                  <option value="ENABLED">仅当别人评论时提醒</option>
                  <option value="DISABLED">不提醒</option>
                </select>
              </gr-select>
            </span>
          </section>
          <section hidden$="[[!_localPrefs.email_format]]">
            <span class="title">邮件格式</span>
            <span class="value">
              <gr-select
                  bind-value="{{_localPrefs.email_format}}">
                <select>
                  <option value="HTML_PLAINTEXT">HTML and plaintext</option>
                  <option value="PLAINTEXT">Plaintext only</option>
                </select>
              </gr-select>
            </span>
          </section>
          <section>
            <span class="title">Diff 查看</span>
            <span class="value">
              <gr-select
                  bind-value="{{_localPrefs.diff_view}}">
                <select>
                  <option value="SIDE_BY_SIDE">并列对比</option>
                  <option value="UNIFIED_DIFF">单列对比</option>
                </select>
              </gr-select>
            </span>
          </section>
          <section>
            <span class="title">在文件列表中显示大小栏</span>
            <span class="value">
              <input
                  id="showSizeBarsInFileList"
                  type="checkbox"
                  checked$="[[_localPrefs.size_bar_in_change_table]]"
                  on-change="_handleShowSizeBarsInFileListChanged">
            </span>
          </section>
          <section>
            <span class="title">发布推送评论</span>
            <span class="value">
              <input
                  id="publishCommentsOnPush"
                  type="checkbox"
                  checked$="[[_localPrefs.publish_comments_on_push]]"
                  on-change="_handlePublishCommentsOnPushChanged">
            </span>
          </section>
          <section>
            <span class="title">默认情况下，将新更改设置为"work in progress"</span>
            <span class="value">
              <input
                  id="workInProgressByDefault"
                  type="checkbox"
                  checked$="[[_localPrefs.work_in_progress_by_default]]"
                  on-change="_handleWorkInProgressByDefault">
            </span>
          </section>
          <section>
            <span class="title">
              为内联编辑更改插入底部签名
            </span>
            <span class="value">
              <input
                  id="insertSignedOff"
                  type="checkbox"
                  checked$="[[_localPrefs.signed_off_by]]"
                  on-change="_handleInsertSignedOff">
            </span>
          </section>
          <gr-button
              id="savePrefs"
              on-tap="_handleSavePreferences"
              disabled="[[!_prefsChanged]]">保存修改</gr-button>
        </fieldset>
        <h2
            id="DiffPreferences"
            class$="[[_computeHeaderClass(_diffPrefsChanged)]]">
          Diff 偏好设置
        </h2>
        <fieldset id="diffPreferences">
          <section>
            <span class="title">上下文</span>
            <span class="value">
              <gr-select bind-value="{{_diffPrefs.context}}">
                <select>
                  <option value="3">3 行</option>
                  <option value="10">10 行</option>
                  <option value="25">25 行</option>
                  <option value="50">50 行</option>
                  <option value="75">75 行</option>
                  <option value="100">100 行</option>
                  <option value="-1">Whole 行</option>
                </select>
              </gr-select>
            </span>
          </section>
          <section>
            <span class="title">充满屏幕</span>
            <span class="value">
              <input
                  id="diffLineWrapping"
                  type="checkbox"
                  checked$="[[_diffPrefs.line_wrapping]]"
                  on-change="_handleDiffLineWrappingChanged">
            </span>
          </section>
          <section id="columnsPref" hidden$="[[_diffPrefs.line_wrapping]]">
            <span class="title">Diff 宽度</span>
            <span class="value">
              <input
                  is="iron-input"
                  type="number"
                  prevent-invalid-input
                  allowed-pattern="[0-9]"
                  bind-value="{{_diffPrefs.line_length}}">
            </span>
          </section>
          <section>
            <span class="title">选项卡宽度</span>
            <span class="value">
              <input
                  is="iron-input"
                  type="number"
                  prevent-invalid-input
                  allowed-pattern="[0-9]"
                  bind-value="{{_diffPrefs.tab_size}}">
            </span>
          </section>
          <section hidden$="[[!_diffPrefs.font_size]]">
            <span class="title">字体大小</span>
            <span class="value">
              <input
                  is="iron-input"
                  type="number"
                  prevent-invalid-input
                  allowed-pattern="[0-9]"
                  bind-value="{{_diffPrefs.font_size}}">
            </span>
          </section>
          <section>
            <span class="title">显示选项卡</span>
            <span class="value">
              <input
                  id="diffShowTabs"
                  type="checkbox"
                  checked$="[[_diffPrefs.show_tabs]]"
                  on-change="_handleDiffShowTabsChanged">
            </span>
          </section>
          <section>
            <span class="title">显示尾空格</span>
            <span class="value">
              <input
                  id="showTrailingWhitespace"
                  type="checkbox"
                  checked$="[[_diffPrefs.show_whitespace_errors]]"
                  on-change="_handleShowTrailingWhitespaceChanged">
            </span>
          </section>
          <section>
            <span class="title">语法高亮</span>
            <span class="value">
              <input
                  id="diffSyntaxHighlighting"
                  type="checkbox"
                  checked$="[[_diffPrefs.syntax_highlighting]]"
                  on-change="_handleDiffSyntaxHighlightingChanged">
            </span>
          </section>
          <section>
          <div class="pref">
            <span class="title">忽略空白行</span>
            <span class="value">
              <gr-select bind-value="{{_diffPrefs.ignore_whitespace}}">
                <select>
                  <option value="IGNORE_NONE">None</option>
                  <option value="IGNORE_TRAILING">Trailing</option>
                  <option value="IGNORE_LEADING_AND_TRAILING">Leading & trailing</option>
                  <option value="IGNORE_ALL">All</option>
                </select>
              </gr-select>
            </span>
          </div>
          <gr-button
              id="saveDiffPrefs"
              on-tap="_handleSaveDiffPreferences"
              disabled$="[[!_diffPrefsChanged]]">保存修改</gr-button>
        </fieldset>
        <h2
            id="EditPreferences"
            class$="[[_computeHeaderClass(_editPrefsChanged)]]">
          Edit 偏好设置
        </h2>
        <fieldset id="editPreferences">
          <gr-edit-preferences
              id="editPrefs"
              has-unsaved-changes="{{_editPrefsChanged}}"></gr-edit-preferences>
          <gr-button
              id="saveEditPrefs"
              on-tap="_handleSaveEditPreferences"
              disabled$="[[!_editPrefsChanged]]">保存修改</gr-button>
        </fieldset>
        <h2 id="Menu" class$="[[_computeHeaderClass(_menuChanged)]]">菜单</h2>
        <fieldset id="menu">
          <gr-menu-editor
              menu-items="{{_localMenu}}"></gr-menu-editor>
          <gr-button
              id="saveMenu"
              on-tap="_handleSaveMenu"
              disabled="[[!_menuChanged]]">保存修改</gr-button>
          <gr-button
              id="resetMenu"
              link
              on-tap="_handleResetMenuButton">重置</gr-button>
        </fieldset>
        <h2 id="ChangeTableColumns"
            class$="[[_computeHeaderClass(_changeTableChanged)]]">
          修改选项卡列表
        </h2>
        <fieldset id="changeTableColumns">
          <gr-change-table-editor
              show-number="{{_showNumber}}"
              displayed-columns="{{_localChangeTableColumns}}">
          </gr-change-table-editor>
          <gr-button
              id="saveChangeTable"
              on-tap="_handleSaveChangeTable"
              disabled="[[!_changeTableChanged]]">保存修改</gr-button>
        </fieldset>
        <h2
            id="Notifications"
            class$="[[_computeHeaderClass(_watchedProjectsChanged)]]">
          提醒
        </h2>
        <fieldset id="watchedProjects">
          <gr-watched-projects-editor
              has-unsaved-changes="{{_watchedProjectsChanged}}"
              id="watchedProjectsEditor"></gr-watched-projects-editor>
          <gr-button
              on-tap="_handleSaveWatchedProjects"
              disabled$="[[!_watchedProjectsChanged]]"
              id="_handleSaveWatchedProjects">保存修改</gr-button>
        </fieldset>
        <h2
            id="EmailAddresses"
            class$="[[_computeHeaderClass(_emailsChanged)]]">
          邮箱地址
        </h2>
        <fieldset id="email">
          <gr-email-editor
              id="emailEditor"
              has-unsaved-changes="{{_emailsChanged}}"></gr-email-editor>
          <gr-button
              on-tap="_handleSaveEmails"
              disabled$="[[!_emailsChanged]]">保存修改</gr-button>
        </fieldset>
        <fieldset id="newEmail">
          <section>
            <span class="title">新增邮箱地址</span>
            <span class="value">
              <input
                  id="newEmailInput"
                  bind-value="{{_newEmail}}"
                  is="iron-input"
                  type="text"
                  disabled="[[_addingEmail]]"
                  on-keydown="_handleNewEmailKeydown"
                  placeholder="email@example.com">
            </span>
          </section>
          <section
              id="verificationSentMessage"
              hidden$="[[!_lastSentVerificationEmail]]">
            <p>
              一封验证邮件已经发送至
              <em>[[_lastSentVerificationEmail]]</em>。 请检查你的收件箱。
            </p>
          </section>
          <gr-button
              disabled="[[!_computeAddEmailButtonEnabled(_newEmail, _addingEmail)]]"
              on-tap="_handleAddEmailButton">发送验证邮箱</gr-button>
        </fieldset>
        <h2 id="HTTPCredentials">HTTP 授权</h2>
        <fieldset>
          <gr-http-password id="httpPass"></gr-http-password>
        </fieldset>
        <div hidden$="[[!_serverConfig.sshd]]">
          <h2
              id="SSHKeys"
              class$="[[_computeHeaderClass(_keysChanged)]]">SSH keys</h2>
          <gr-ssh-editor
              id="sshEditor"
              has-unsaved-changes="{{_keysChanged}}"></gr-ssh-editor>
        </div>
        <div hidden$="[[!_serverConfig.receive.enable_signed_push]]">
          <h2
              id="GPGKeys"
              class$="[[_computeHeaderClass(_gpgKeysChanged)]]">GPG keys</h2>
          <gr-gpg-editor
              id="gpgEditor"
              has-unsaved-changes="{{_gpgKeysChanged}}"></gr-gpg-editor>
        </div>
        <h2 id="Groups">群组</h2>
        <fieldset>
          <gr-group-list id="groupList"></gr-group-list>
        </fieldset>
        <h2 id="Identities">身份</h2>
        <fieldset>
          <gr-identities id="identities"></gr-identities>
        </fieldset>
        <template is="dom-if" if="[[_serverConfig.auth.use_contributor_agreements]]">
          <h2 id="Agreements">协议</h2>
          <fieldset>
            <gr-agreements-list id="agreementsList"></gr-agreements-list>
          </fieldset>
        </template>
        <h2 id="MailFilters">邮件 Filters</h2>
        <fieldset class="filters">
          <p>
            Gerrit 电子邮件支持更改元数据用于邮件过滤器。
          </p>
          <p>
            下面是一些Gmail查询示例，用于过滤器或搜索存档的消息，完整的说明请查看
            <a href$="[[_getFilterDocsLink(_docsBaseUrl)]]"
                target="_blank"
                rel="nofollow">文档</a>
          </p>
          <table>
            <tbody>
              <tr><th>名称</th><th>操作</th></tr>
              <tr>
                <td>Changes requesting my review</td>
                <td>
                  <code class="queryExample">
                    "Gerrit-Reviewer: <em>Your Name</em>
                    &lt;<em>your.email@example.com</em>&gt;"
                  </code>
                </td>
              </tr>
              <tr>
                <td>Changes from a specific owner</td>
                <td>
                  <code class="queryExample">
                    "Gerrit-Owner: <em>Owner name</em>
                    &lt;<em>owner.email@example.com</em>&gt;"
                  </code>
                </td>
              </tr>
              <tr>
                <td>Changes targeting a specific branch</td>
                <td>
                  <code class="queryExample">
                    "Gerrit-Branch: <em>branch-name</em>"
                  </code>
                </td>
              </tr>
              <tr>
                <td>Changes in a specific project</td>
                <td>
                  <code class="queryExample">
                    "Gerrit-Project: <em>project-name</em>"
                  </code>
                </td>
              </tr>
              <tr>
                <td>Messages related to a specific Change ID</td>
                <td>
                  <code class="queryExample">
                    "Gerrit-Change-Id: <em>Change ID</em>"
                  </code>
                </td>
              </tr>
              <tr>
                <td>Messages related to a specific change number</td>
                <td>
                  <code class="queryExample">
                    "Gerrit-Change-Number: <em>change number</em>"
                  </code>
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
        <gr-endpoint-decorator name="settings-screen">
        </gr-endpoint-decorator>
      </main>
    </div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
  </template>
  <script src="../../../scripts/util.js"></script>
  <script src="gr-settings-view.js"></script>
</dom-module>
